 <template>
  <div>
    <el-dialog
      width="60%"
      @close="handleClose(false)"
      close-on-press-escape
      v-dialogDrag
      :title="'版本管理'"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      v-if="showDialog"
      @open="open"
    >
      <div>
        <el-table ref="multipleTable" style="width: 100%" :data="list" border>
          <el-table-column prop="projectname" label="发布名称" align="center">
          </el-table-column>
          <el-table-column
            prop="releasedescribe"
            label="发布内容"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="pagenum" label="页码数" align="center">
          </el-table-column>
          <el-table-column prop="releaseusername" label="发布人" align="center">
          </el-table-column>
          <el-table-column
            prop="releasetime"
            label="发布时间"
            align="center"
            width="150px"
          >
          </el-table-column>
          <el-table-column prop="releaseremarks" label="备注" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="250px">
            <template slot-scope="scope">
              <el-button type="text" @click="handleClone(scope.row)"
                >克隆</el-button
              >
              <span
                class="el-icon-loading"
                style="padding: 0 10px"
                v-if="scope.row.iconLoading"
              >
              </span>
              <el-button type="text" @click="handleDownload(scope.row)" v-else
                >导出</el-button
              >
              <el-button type="text" v-if="scope.row.packStatus == '0'" disabled
                >打包中</el-button
              >
              <el-button
                type="text"
                v-if="scope.row.packStatus == '1'"
                @click="navTo(scope.row)"
                >下载App</el-button
              >

              <el-tooltip
                v-if="scope.row.packStatus == '-1'"
                class="item"
                effect="dark"
                content="APP打包异常"
                placement="top-start"
              >
                <el-button
                  size="small"
                  type="text"
                  @click="jiemaMobilePackTask(scope.row)"
                  >重新打包APP</el-button
                >
              </el-tooltip>
              <el-button
                type="text"
                @click="jiemaMobilePackTask(scope.row)"
                v-if="scope.row.packStatus == null"
                >打包APP
              </el-button>

              <el-button
                type="text"
                @click="handleDel(scope.row)"
                style="color: #f56c6c"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  jiemaDeleteProjects,
  jiemaMobilePackTask,
  jiemaDelete,
  jiemaQueryRelease,
  jiemaQueryDownloadProjectV2Async,
  jiemaAddProjectV2Add,
  jiemaCopyProject,
  jiemaDownloadReleaseProjectV2Async,
} from "@/api/jiema";
import { uuid } from "@/utils";
import { JIEMA } from "@/utils/local";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    projectcode: {
      type: String,
      default: "",
    },
  },
  watch: {
    projectcode: {
      handler: function (val) {
        this.list = [];
        if (val) {
          console.log(val, "监听");
          this.jiemaQueryRelease(val);
        }
      },

      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {},
  computed: {},
  methods: {
    handleDel(item) {
      this.$confirm("确定要删除该版本吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const { projectcode, version, id, remarks } = item;
          jiemaDeleteProjects({ appuuid: projectcode, version, id }).then(
            (res) => {
              // await jiemaDelete({ appuuid: projectcode, version, id: remarks });
              this.$msg({
                type: "success",
                message: "删除成功!",
              });
              this.jiemaQueryRelease();
            }
          );
        })
        .catch((err) => {});
    },
    navTo(item) {
      const url = `${JIEMA}/package/downApp?appuuid=${item.projectcode}&version=${item.version}&versionType=2`;

      this.download(url, item.name);
    },
    jiemaMobilePackTask(item) {
      const { id, projectcode, version } = item;
      item.iconLoading2 = true;

      jiemaMobilePackTask({
        id,
        version,
        appuuid: projectcode,
      }).then((res) => {
        this.$msg({
          type: "warning",
          message: "打包时间较长(1-30分钟),请耐心等待",
        });
        item.packStatus = "0";
        item.time2 = setInterval(async () => {
          const res = await jiemaQueryRelease({ projectcode });
          const list = res.data.data;
          list.forEach((ele) => {
            if (ele.id == item.id) {
              // 打包失败
              if (ele.packStatus == "-1") {
                this.$msg("打包失败");

                clearInterval(item.time2);
                item.item2 = null;
              }
              if (ele.packStatus == "1") {
                // this.navTo()
                this.$msg({
                  type: "success",
                  message: "打包成功",
                });
                clearInterval(item.time2);
                item.item2 = null;
              }
              item.packStatus = ele.packStatus;
            }
          });
          console.log(this.list);
        }, 3000);
      });
    },
    download(url, name) {
      const downloadElement = document.createElement("a");
      let href = url;
      downloadElement.href = href;
      downloadElement.download = name; // 文件名字
      document.body.appendChild(downloadElement);
      downloadElement.click();
      document &&
        document.bodyNaNpxoveChild &&
        document.bodyNaNpxoveChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象\
    },
    async handleDownload(item) {
      item.iconLoading = true;
      const projectname = item.projectname;
      const query = {
        projectcode: item.projectcode,
        version: item.version,
      };
      try {
        await jiemaDownloadReleaseProjectV2Async(query);
        // await jiemaQueryDownloadProjectV2Async(query);
        item.time = setInterval(async () => {
          const dres = await jiemaQueryDownloadProjectV2Async(query);
          const { flag, data } = dres.data;
          console.log("res.data.data :>> ", dres.data);
          if (flag == "true") {
            this.download("/jiema" + data, projectname);
            clearInterval(item.time);
            item.item = null;
            item.iconLoading = false;
          }
        }, 2000);
      } catch (error) {
        item.iconLoading = false;
      }
    },
    handleClone(item) {
      console.log(item);
      const that = this;
      this.$prompt("请输入应用名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "名称不能为空",
        async beforeClose(action, instance, done) {
          console.log(instance.inputValue);

          if (action === "confirm") {
            const { projectcode, version } = item;
            const remarks = uuid(16);
            await jiemaCopyProject({
              appuuid: projectcode,
              projectname: instance.inputValue,
              remarks: remarks,
              version: version,
            });
            await jiemaAddProjectV2Add({
              id: remarks,
            });
            console.log(this, "thisthis");
            done();
            that.$emit("update:showDialog", false);
            that.$emit("handleClose", true);
          } else {
            done();
          }
        },
      })
        .then(({ value }) => {})
        .catch(() => {});
    },
    handleClose(isRefresh, token) {
      this.$emit("update:showDialog", false);
    },
    async jiemaQueryRelease(projectcode) {
      const res = await jiemaQueryRelease({ projectcode: this.projectcode });
      this.list = res.data.data.map((item) => {
        return {
          ...item,
          iconLoading: false,
          iconLoading2: false,
          time: null,
          time2: null,
        };
      });
      console.log(res);
    },
    open() {
      console.log(this.projectcode);
    },
  },
};
</script>

<style lang='scss' scoped>
.addbutton {
  background-color: #2680d2;
  color: #ffffff;
  position: absolute;
  right: 0px;
  top: 0px;
}

.el-icon-plus {
  color: #ffffff;
}

.div-inline {
  display: inline;
  background-color: #e4e4e4;
  padding: 2px;
  border: 1px #5a5e66 solid;
  line-height: 25px;
  white-space: nowrap;
  word-wrap: break-word;
}

.imageHome {
  padding: 5px 5px 5px 5px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;

  .image-size {
    width: 94px;
    height: 94px;
    /*background: #2E2E2E;*/
    border-radius: 50%;
    opacity: 1;
    display: flex;
  }
}
</style>
